<template>
  <div class="binAnalysis">
    <el-row :style="{paddingBottom: 0}">
      <el-col>
        <dynForm :info-form="infoForm" :search-tags="searchTags" :select-list="selectList" label-width="80px">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch">
            {{ $t("search") }}
          </el-button>
        </dynForm>
      </el-col>
    </el-row>
    <el-card>
      <el-row>
        <div class="echartsList">
          <div v-for="(item, index) of echartsList" :key="index" class="echart-item">
            <binEcharts :echart-item="item"/>
          </div>
        </div>
      </el-row>
    </el-card>
    <!-- 表单部分 -->
    <el-card v-if="tableData.length" shadow="never">
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import networkTips from '@/mixins/networkTips'
import mySetting from '@/mixins/mySetting'
import eqpBaseApi from '@/api/equipment/eqpbase'
import enumApi from '@/api/system/enum'
import dashboardMagApi from '@/api/dashboardManager/binAnalysis'
import binEcharts from './components/echarts'
export default {
  name: 'BinAnalysis',
  components: { binEcharts },
  mixins: [mySetting, networkTips],
  props: {},
  data() {
    return {
      infoForm: {},
      searchTags: [
        { label: this.$t('lotId'), prop: 'LotId', tag: 'DynInput' },
        { label: this.$t('handlerId'), prop: 'handlerId', tag: 'DynSelect' },
        { label: this.$t('testerId'), prop: 'testerId', tag: 'DynSelect' },
        { label: this.$t('productName'), prop: 'productName', tag: 'DynInput' },
        { label: this.$t('binType'), prop: 'CheckBinType', tag: 'DynSelect', translate: true },
        { label: this.$t('timeInterval'), prop: '', tag: 'Dyndaterange', event: (value) => {
          this.infoForm.startTime = Array.isArray(value) ? value[0] : null
          this.infoForm.endTime = Array.isArray(value) ? value[1] : null
        } }
      ],
      selectList: {},
      tableColumns: [
        { prop: 'testerId', label: 'tester_id', width: '140px' },
        { prop: 'handlerId', label: 'handler_id', width: '100px' },
        { prop: 'lotId', label: 'lot_id', width: '120px' },
        { prop: 'trStep', label: 'tr_step' },
        { prop: 'testedQty', label: 'tested_qty', width: '100px' },
        { prop: 'passQty', label: 'pass_qty', width: '100px' },
        { prop: 'startTime', label: 'start_time', width: '160px' },
        { prop: 'endTime', label: 'end_time', width: '160px' },
        { prop: 'yield', label: 'yield' }
      ],
      tableLoading: true,
      echartsList: [],
      columnList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getTestList()
    this.getHandleList()
    this.getBinTypeList()
  },
  mounted() {},
  methods: {
    // 初始化列表
    async initList() {
      // push会导致重复添加
      // this.tableColumns = this.$options.data.call(this).tableColumns
      const res = await dashboardMagApi.getList(this.$clearNull(this.infoForm))
      // 每个item添加'%'字符串
      const newArr = res.data.binDataInfoList.map(p => {
        const result = {}
        Object.keys(p).forEach(c => {
          result[c] = p[c] + '%'
        })
        return result
      })
      this.tableData = res.data.binAnalysisList.map((ele, index) => Object.assign({}, ele, newArr[index]))
      this.echartsList = res.data.binDataInfoList
      this.columnList = res.data.binColumnInfoList.map(ele => {
        return {
          id: Math.random() * 100000,
          prop: ele.binColumn,
          label: ele.waferBinYield
        }
      })
      this.tableLoading = false
    },
    doSearch() {
      this.initList()
    },
    // 获取Tester数据
    async getTestList() {
      const res = await eqpBaseApi.getTestList({ EqpType: 'TESTER' })
      this.$set(this.selectList, 'testerId', res.data)
    },
    // 获取Handle数据
    async getHandleList() {
      const res = await eqpBaseApi.getHandleList()
      this.$set(this.selectList, 'handlerId', res.data)
    },
    // 获取bintype数据
    async getBinTypeList() {
      const res = await enumApi.getList({ enumName: 'EnumBinType' })
      this.$set(this.selectList, 'CheckBinType', res.data)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-form {
  padding-top: 10px;
      .el-form-item{
    margin-bottom: 22px;
  }
}
.echartsList{
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .echart-item{
    width: 200px;
    height: 210px;
    display:flex;
    align-items: center;
    justify-content: center;
  }
}
.binAnalysis{
  padding-bottom: 33px;
}
</style>
